<template>
    <van-card v-for="(item, index) in doctorList" :key=" 'img' + index" :title="item.name" :desc="item.level"
        :thumb="item.avatar">
        <template #tags>
            <van-space :size="15">
                <van-tag plain type="danger" size="medium">{{ parseInt(Math.random() * 10000) }}</van-tag>
                <van-tag plain type="danger" size="medium">接诊量</van-tag>
            </van-space>
        </template>
        <template #footer>
            <van-button round type="success" size="small" color="#1486fa">
                &nbsp;&nbsp;&nbsp;&nbsp;预约&nbsp;&nbsp;&nbsp;&nbsp;
            </van-button>
            <div class="van-multi-ellipsis--l2" style=" margin-top: 5px; font-size: 14px; text-align: left;">
                {{ item.introduce }}
            </div>
            
        </template>
    </van-card>

</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import { getDoctor } from "../../api/api";
import $bus from "../../config/eventBus";

// 存放医生数据
const doctorList = ref([]);

// 获取医生数据
onMounted(async () => {
    const { data: res } = await getDoctor();
    // console.log(res);
    // 选取符合条件的医生
    doctorList.value = res.data.data.filter(item => item.level === '院长' || item.level === '主任医师' || item.level === '副主任医师'
    )
    // 选取前十条数据
    doctorList.value = doctorList.value.splice(0,10)
    // console.log(doctorList.value);
});

// 隐藏底部导航
$bus.emit('tabBarHide', false)
// 返回显示导航
onUnmounted(() => {
  $bus.emit("tabBarHide", true);
})

</script>

<style scoped lang="scss">

</style>